<template>
  <div class="unk-table">
    <!-- 搜索栏 -->
    <el-row>
      <el-col :span="18">
        <div class="grid-content bg-purple" id="searchBox">
          <el-form ref="searchform" label-width="80px" :inline="true">
            <el-form-item v-for="(item,index) in data.searchData" :key="index" :label="item.label" :prop="item.key">
              <el-input v-if="item.type=='text'" v-model="data.tableLoadOption[item.requestKey]"
                :placeholder="`请输入${item.label}`" clearable size="small" style="width: 240px">
              </el-input>
              <el-select v-if="item.type=='select'" v-model="data.tableLoadOption[item.requestKey]"
                :placeholder="`请选择${item.label}`" size="small" style="width: 235px">
                <el-option v-for="i in item.selectOptionValue" :key="i.index" :value="i.deptName"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button type="primary" icon="el-icon-search" size="mini" @click.native="tableLoad">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetForm('studentform')">重置</el-button>
          <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch">
            {{word}}
            <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <!-- table工具栏 -->
    <el-row :gutter="20" style="margin-bottom: 8px">
      <el-col :span="10">
        <el-button v-for="(item,index) in data.tableButtonOption" :key="index" type="primary" :icon="item.icon"
          v-hasPermi="[item.business]" size="mini" @click="clickFunc(item.type,'','')">{{item.label}}</el-button>
        <!-- 编辑列组件 -->
        <el-popover placement="right" v-model="visible" width="500" trigger="click" style="margin-left:10px;">
          <el-row style="margin-bottom: 8px;text-align: right;">
            <el-button type="primary" size="mini" @click="handleEditColumn('save')" plain>保存</el-button>
            <el-button type="text" @click="handleEditColumn('reset')" size="mini">{{$store.state.settings.isCheckAll}}
            </el-button>
            <el-button type="text" @click="visible = false,tableHeaderUpdate = false" size="mini">关闭</el-button>
          </el-row>
          <!-- <el-tree ref="tree" :default-expanded-keys="tableOptionKey" :data="showData.tableOption" show-checkbox node-key="key" :props="defaultProps"></el-tree> -->
          <el-tree ref="tree" :default-checked-keys="resetCheckedKey" :data="data.tableOption" show-checkbox
            node-key="key" :props="defaultProps" v-if="flag"></el-tree>
          <el-button type="primary" icon="el-icon-setting" size="mini" slot="reference">编辑列</el-button>
        </el-popover>
      </el-col>
      <el-col :span="14" style="text-align: right;">
        <!-- 分页 -->
        <pagination v-show="data.total > 0" :total="data.total" :page.sync="data.tableLoadOption.pageNum"
          :limit.sync="data.tableLoadOption.pageSize" @pagination="tableLoad" />
      </el-col>
    </el-row>
    <!-- 数据表格 -->
    <el-table :data="data.tableData" tooltip-effect="dark" :width="$store.state.settings.tableWidth"
      :height="$store.state.settings.tableHeight" style="width: 100%;"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <template v-for="(item, index) in data.tableOptionSave">
        <el-table-column :key="index" :prop="item.key" :fixed="item.fixed" :label="item.label" :width="item.width"
          align="center"></el-table-column>
      </template>
      <el-table-column v-if="data.isBar==true" label="操作" fixed="right" width="180" align="center"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div v-if="data.isBarShow==true">
            <el-button v-for="(item,index) in data.tableBarOption" :key="index" size="mini" type="text"
              :icon="item.icon" v-hasPermi="[item.business]" @click="clickFunc(item.type,scope.row,scope.$index)">
              {{item.label}}</el-button>
          </div>
          <el-popover v-if="data.isBarShow==false" placement="left" width="" trigger="click" style="margin-left:0px;">
            <el-row v-for="(item,index) in data.tableBarOption" :key="index" style="margin-bottom: 8px;">
            <el-button  size="mini" type="text"
              :icon="item.icon" v-hasPermi="[item.business]" @click="clickFunc(item.type,scope.row,scope.$index)">
              {{item.label}}</el-button>
            </el-row>
            <el-button type="text" icon="el-icon-setting" size="mini" slot="reference" style="padding-left:5px;padding-right:5px;">展开操作</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default() {
        return []
      }
    }
  },
  data() {
    return {
      flag: false,
      visible: false,
      tableHeaderUpdate: false,
      //编辑列组件配置
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //展开
      showAll: true,
      //编辑列组件已选中的选项
      resetCheckedKey: [],
    }
  },
  methods: {
    clickFunc(type, row, index) {
      this.$parent.clickFunc(type, row, index);
    },
    closeSearch() {
      this.showAll = !this.showAll;
      var searchBoxHeght = document.getElementById("searchBox");
      if (this.showAll == false) {
        searchBoxHeght.style.height = 60 + "px";
      } else {
        searchBoxHeght.style.height = "auto";
      }
    },
    handleImport() {
      this.$parent.handleImport();
    },
    handleExport() {
      this.$parent.handleExport();
    },
    handleAddMsg() {
      this.$parent.addstudent();
    },
    isChecked() {
      if (this.$refs.tree.getCheckedNodes().length < this.data.tableOption.length) {
        this.selectKey(this.data.tableOption)
        //this.$store.commit("settings/isCheckAll_setting","全不选")
      } else {
        // this.$refs.tree.setCheckedNodes([])
        // this.$store.commit("settings/isCheckAll_setting","全选")
      }
    },
    handleEditColumn(val) {
      this.tableHeaderUpdate = true
      if (val == "save") {
        this.$parent.saveTableOptionSave(this.$refs.tree.getCheckedNodes());
      } else {
        this.isChecked()
      }
    },
    selectKey(saveKey) {
      let _this = this
      _this.resetCheckedKey = []
      saveKey.forEach((item, index) => {
        if (item.fixed != false) {
          disabled: true
        }
        _this.resetCheckedKey.push(item.key)
      })
    },
    studentatt() {
      this.$parent.studentatt();
    },
    perfecttheinformation() {
      this.$parent.perfecttheinformation();
    },
    deleteRow(studentId, index) {
      this.$parent.deleteRow(studentId);
      this.data.tableData.splice(index, 1);
    },
    tableLoad() {
      this.$parent.tableLoad(this.data.tableLoadOption)
    }
  },
  computed: {
    word: function () {
      if (this.showAll == false) {
        //对文字进行处理
        return "展开搜索";
      } else {
        return "收起搜索";
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.closeSearch();
    });
    this.selectKey(this.data.tableOptionSave)//初始化编辑列默认选中项
    this.data.tableOptionSave.forEach((item, index) => {
      if (item.fixed != false) {
        item.disabled = true
      }
    })
    //载入编辑列
    this.flag = true
  }
}
</script>
<style scoped>
#searchBox {
  overflow: hidden;
}
</style>